<template>
	<view class="alldiv">
		<!-- 头部搜索地图区域 -->
		<view class="headdiv">
			<view class="mapdiv">
				<mypicker class="mypickerdiv" :candidates="peopleList" :isJSON="true" keyName="name"
					:placeholder="language.Lease.dqval" v-model="regiPerson" @input="personInput"
					@select="personSelect"></mypicker>
				<u-search :placeholder="language.Lease.searchvalplaceholder" shape="round" class="topL"
					:showAction="false" v-model="searchval"></u-search>
			</view>
			<map style="width: 100%; " :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
			<!-- 方法一：点击小程序map地图插件跳转到app中打开 -->
		</view>
		<!-- 主体区域 -->
		<!-- <view class="bodydiv">
      <view class="title"> {{ language.Lease.title }} </view>
      <view class="StationBox">
        <view
          class="StationCon"
          v-for="item in 6"
          :key="item"
          @click="stationInfo"
        >
          <view class="top">
            <view class="distance">500m</view>
            <text class="text">PSO服务站</text>
            <u-tag class="tagBox" text="折扣大" type="warning" plain></u-tag>
            <u-tag class="tagBox" text="绿色出行" type="success" plain></u-tag>
          </view>
          <view class="middle">
            <text class="middleCon">品牌</text>|
            <text class="middleCon">电池</text>|
            <text class="middleCon">地下</text>
          </view>
          <view class="bot">
            <view class="botCon">
              <view class="info1">车辆</view>
              <view class="num"> <text class="activeNum">29</text>/50 </view>
            </view>
            <view class="botCon">
              <view class="info1">电池</view>
              <view class="num"> <text class="activeNum">29</text>/50 </view>
            </view>
            <view class="botCon">
              <view class="info1">充电桩</view>
              <view class="num"> <text class="activeNum">29</text>/50 </view>
            </view>
          </view>
        </view>
      </view>
    </view> -->

		<view class="lease-container bodydiv">
			<view class="title"> {{ language.Lease.title }} </view>
			<view class="StationBox">
				<view class="StationCon" v-for="item in 6" :key="item" @click="stationInfo">
					<view class="top">
						<view class="distance">500m</view>
						<text class="text">PSO服务站</text>
						<u-tag class="tagBox" text="折扣大" type="warning" plain></u-tag>
						<u-tag class="tagBox" text="绿色出行" type="success" plain></u-tag>
					</view>
					<view class="middle">
						<text class="middleCon">品牌</text>|
						<text class="middleCon">电池</text>|
						<text class="middleCon">地下</text>
					</view>
					<view class="bot">
						<view class="botCon">
							<view class="info1">车辆</view>
							<view class="num"> <text class="activeNum">29</text>/50 </view>
						</view>
						<view class="botCon">
							<view class="info1">电池</view>
							<view class="num"> <text class="activeNum">29</text>/50 </view>
						</view>
						<view class="botCon">
							<view class="info1">充电桩</view>
							<view class="num"> <text class="activeNum">29</text>/50 </view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<customTabbar :curr-page="2" :key="$store.state.internationalization.number" />
	</view>
</template>

<script>
	import customTabbar from "../../wxcomponents/customTabbar.vue";
	import Mypicker from "../../wxcomponents/title/Mypicker.vue";
	export default {
		components: {
			mypicker: Mypicker,
			customTabbar,
		},
		data() {
			return {
				language: {},
				// 查询的关键字
				searchval: "",
				id: 0, // 使用 marker点击事件 需要填写id
				title: "map",
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: "../../../static/location.png",
					},
					{
						latitude: 39.9,
						longitude: 116.39,
						iconPath: "../../../static/location.png",
					},
				],
				//   这个是子组件的参数
				regiPerson: "", // 选择的Item
				peopleList: [{
						id: "1",
						name: "选项一",
					},
					{
						id: "2",
						name: "选项二",
					},
					{
						id: "3",
						name: "选项三",
					},
					{
						id: "4",
						name: "选项四",
					},
					{
						id: "5",
						name: "选项五",
					},
				], // 登记人选择列表
			};
		},
		onShow: function() {
			this.getlanguagedata();
			// console.log("Personalcenter Show",this.language.tab.rental);
		},
		onLoad() {
			this.getlanguagedata();
		},
		mounted() {
			this.getlanguagedata();
		},
		methods: {
			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			// 登记人员选择
			personSelect(e) {
				console.log("登记人员选择", e.id);
			},

			// 处室选择
			changePicker(e) {
				console.log("deptList", this.deptList);
			},
			//站点详情
			stationInfo() {
				console.log(1111111);
				uni.navigateTo({
					url: "/pages/Lease/StationInfo",
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 100vh;
		// background-color: rgba(255, 255, 255, 0.1);

		// 这个是头部样式
		.headdiv {
			width: 100%;
			// height: 30vh;
			// position: relative;
			overflow: hidden;

			//   这个是地图区域的样式
			.mapdiv {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 7%;
				/* 设置 mapdiv 的高度 */
				z-index: 1;
				/* 将 mapdiv 放置在上层 */
				display: flex;

				// 这个是子组件下拉框样式
				.mypickerdiv {
					width: 25%;
					height: 100%;
					font-size: 12px;
					font-weight: 400px;
					display: flex;
				}
			}
		}
	}

	/deep/ .uni-input-input {
		position: relative;
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: 16.46px;
		color: rgba(56, 56, 56, 1);
		letter-spacing: inherit;
		font-size: 20px;
		font-weight: 400;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
	}

	//   这个是主体区域样式
	.bodydiv {
		width: 100%;
		border-radius: 20px 20px;
		background-color: rgba(255, 255, 255, 1);
		opacity: 1;
		// position: absolute;
		padding: 32rpx;
		box-sizing: border-box;
		box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
		// position: relative;
		z-index: 999;

		.title {
			font-weight: 700;
			// line-height: 30px;
			// padding-top: 15px;
		}

		.StationBox {
			// width: 95%;
			// height: 50vh;
			overflow: auto;
			// margin: 0 -6px;

			.StationCon {
				box-sizing: border-box;
				border-radius: 10px;
				padding: 12rpx 24rpx;
				box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
					rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
				margin: 15px 6px;

				.top {
					overflow: hidden;

					.distance {
						float: right;
						font-weight: bold;
						position: relative;
						padding-left: 20px;
					}

					.distance:before {
						display: inline-block;
						content: "";
						position: absolute;
						left: 0;
						bottom: 0;
						top: 0;
						width: 20px;
						background: url("@/static/icon/lease/position.png") no-repeat center center;
					}

					.text {
						float: left;
						margin-right: 20rpx;
					}

					.tagBox {
						float: left;
						margin: 0 5px;
						font-size: 12px;
						margin-left: 16rpx;
					}
				}

				.middle {
					color: rgb(153, 153, 153);
					font-size: 12px;

					.middleCon {
						margin: 5px;
						line-height: 30px;
					}

					.middleCon:first-child {
						margin-left: 0;
					}
				}

				.bot {
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					color: rgba(153, 153, 153, 1);

					.botCon {
						background: linear-gradient(90deg,
								rgba(65, 240, 135, 0.3) 0%,
								rgba(47, 212, 184, 0.3) 100%);
						border-radius: 8px;
						width: 33.33%;
						padding: 9px;
						flex: 1;
						margin-right: 8px;
						box-sizing: border-box;
						position: relative;

						.info1 {
							margin-bottom: 5px;
							z-index: 999;
							position: relative;
							font-size: 12px;
							color: rgba(153, 153, 153, 1);
						}

						.num {
							font-size: 16px;
							line-height: 20px;
							text-align: center;
							z-index: 999;
							position: relative;

							.activeNum {
								font-size: 18px;
								color: rgba(47, 212, 184, 1);
								font-weight: bold;
							}
						}
					}

					.botCon:last-child {
						margin-right: 0;
					}

					.botCon::before {
						display: inline-block;
						content: "";
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						top: 0;
					}

					.botCon:nth-child(1)::before {
						background: url(@/static/icon/lease/car.png) no-repeat right bottom;
					}

					.botCon:nth-child(2)::before {
						background: url(@/static/icon/lease/battery.png) no-repeat right bottom;
					}

					.botCon:nth-child(3)::before {
						background: url(@/static/icon/lease/car.png) no-repeat right bottom;
					}
				}
			}
		}
	}
</style>

<style lang="less" scoped>
	.lease-container {
		// margin: 48rpx  32rpx;
		border-radius: 16rpx 16rpx 0 0;
	}
</style>
